/**
 * Created with JetBrains WebStorm.
 * User: Brose
 * Date: 2015/5/8
 * Time: 13:49
 */

require.config({
    paths: {
        echarts: './media/js/mc/dist'
    }
});
require(
    [
        'echarts',
        'echarts/chart/pie',
        'echarts/chart/line',
        'echarts/chart/map',
        'echarts/chart/bar'
    ],
    function (ec) {
        if (rn.level === 2) {
            init_usertype_pie(ec);
            init_outof_line(ec);
            init_safe_map(ec);
        } else if (rn.level === 3) {

            init_weekdevice_bar(ec);
            init_recsort_bar(ec);
        } else if (rn.level === 4) {
            init_versionup_bar(ec);
            init_activeuser_line(ec);
        }
    }
);

/**
 *
 * @type {string}
 */
var _rootName = "hn"; //目录名称
var userTypePieChart, _safeMapChart, _outofLineChart,
    _weekdeviceBarChart, _recsortPieChart,
    _versionupBarChart, _activeuserLineChart;
var _domSafeMap = document.getElementById("safe-map"),
    _domWeekdeviceBar = document.getElementById("weekdevice-bar"),
    _domOutofLine = document.getElementById("outof-line"),
    _domUserTypePie = document.getElementById("usertype-pie"),
    _domRecsortPie = document.getElementById("recsort-bar"),
    _domVersionupBar = document.getElementById("versionup-bar"),
    _domActiveuserLine = document.getElementById("activeuser-line");
var _themeName = 'macarons', //主题风格//主题风格
    _backgroundColor = '#fff',
    _axisPointer = {}, //坐标轴样式
    _tooltip = {},
    _toolbox = { //工具栏
        orien: 'vertical',
        y: "center",
        feature: {
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    _calculable = false, //拖拽重计算默认为false
    _barItemStyle = {
        normal: {
            barBorderRadius: 0
        }
    },
    _symbolSize = 2,
    _grid = {
        x: 45,
        y: 10,
        x2: 15,
        y2: 65
    },
    _curIndx = 0,
    _legendMax1366 = { //分辨率<=1366
        orient: 'horizontal',
        x: 'center',
        y: 15,
        itemGap: 15,
        padding: 0
    };

function init_outof_line(ec) {
    _outofLineChart = ec.init(_domOutofLine, _themeName);
    var _REQUESTS = ["./media/local-json-" + rn.pageLocation + "/outofline.json", "./media/local-json-" + rn.pageLocation + "/outofline.json"];
    $.myAjaxV1({
        url: _REQUESTS[_REQUEST_TYPE],
        data: {},
        callback: function (data) {
            var option = {
                color: ["#FF9900"],
                backgroundColor: _backgroundColor,
                calculable: false,
                title: {
                    show: false,
                    text: data.resultDatas.chartTitle,
                    subtext: data.resultDatas.chartSubTitle,
                    x: 'center'
                },
                tooltip: _tooltip,
                legend: {
                    orient: 'horizontal',
                    y: 'bottom',
                    data: data.resultDatas.legendData
                },
                grid: {
                    x: 35,
                    y: 15,
                    x2: 20,
                    y2: 50
                },
                toolbox: _toolbox,
                calculable: false,
                xAxis: [{
                    type: 'category',
                    data: data.resultDatas.xAxisData,
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999',
                            width: 2,
                            type: 'solid'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    data: data.resultDatas.yAxisData,
                    max: 20,
                    min: 0,
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999',
                            width: 2,
                            type: 'solid'
                        }
                    }
                }],
                series: [{
                    name: "违规数量",
                    type: "line",
                    symbolSize: _symbolSize,
                    smooth: false,
                    data: data.resultDatas.seriesData.line1Data,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 1,
                                color: '#FF9900'
                            }
                        }
                    }
                }]
            };
            _outofLineChart.setOption(option);
            addHandler(window, "resize", function () {
                _outofLineChart.resize();
            })
        }
    });

}
function init_safe_map(ec) {
    _safeMapChart = ec.init(_domSafeMap, _themeName);
    var _rn = rn.pageLocation.toUpperCase(), _mapName = _rn + "_MAP";
    require('echarts/util/mapData/params').params[_mapName] = {
        getGeoJson: function (callback) {
            $.getJSON('./media/geo&map-json/' + _rn + '_geo.json?v=' + new Date().getTime(), callback);
        }
    };
    var _REUQESTS = ['./media/geo&map-json/' + _rn + '_map.json', './media/geo&map-json/' + _rn + '_map.json'];
    $.myAjaxV1({
        url: _REUQESTS[_REQUEST_TYPE],
        data: {},
        callback: function (data) {
            var option = {
                backgroundColor: _backgroundColor,
                calculable: false,
                title: {
                    text: data.resultDatas.chartTitle,
                    subtext: data.resultDatas.chartSubTitle
                },
                toolbox: _toolbox,
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: data.resultDatas.legendData,
                    showLegendSymbol: true
                },
                dataRange: {
                    show: false,
                    min: 0,
                    max: 50,
                    calculable: true, //为true默认分割100份
                    orient: 'vertical',
                    itemGap: 0,
                    y: 'bottom',
                    x: 30
                },
                series: [{
                    mapLocation: {
                        x: 300,
                        height: 350
                    },
                    name: "海南省",
                    type: "map",
                    mapType: _mapName,
                    itemStyle: {

                        normal: {
                            label: {
                                show: true,
                                textStyle: {
                                    color: "#000"
                                }
                            },
                            borderWidth: 2,
                            lineStyle: {
                                type: 'dashed',
                                color: "yellow",
                                shadowBlur: 10
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                textStyle: {
                                    color: "#fff"
                                }

                            }
                        }
                    },
                    data: data.resultDatas.seriesData.map1Data
                }]
            }
            _safeMapChart.setOption(option);
            addHandler(window, "resize", function () {
                _safeMapChart.resize();
            })
        }
    });


}
function init_usertype_pie(ec) {
    userTypePieChart = ec.init(_domUserTypePie, _themeName);
    /* var _REQUESTS = ["./media/local-json-" + rn + "/usertypepie.json", "./media/local-json-" + rn + "/usertypepie.json", "./media/local-json-" + rn + "/outofline.json", "./media/local-json-" + rn + "/usertypepie.json"];
     $.myAjaxV1({
     url: _REQUESTS[_REQUEST_TYPE],
     data: {},
     callback: function (data) {

     }
     });*/
    var option = {
        color: ["#6699CC", "#CCCC66"],
        backgroundColor: _backgroundColor,
        calculable: false,
        title: {
            show: false,
            text: '动态数据',
            subtext: '纯属虚构'
        },
        tooltip: _tooltip,
        legend: {
            y: 15,
            data: ['手机用户', '其他用户']
        },
        toolbox: _toolbox,
        calculable: false,
        series: [{
            name: '用户数量统计',
            type: 'pie',
            radius: "60%",
            itemStyle: {
                normal: {
                    labelLine: {
                        length: 10
                    }
                }
            },
            data: [{
                name: '手机用户',
                value: 8974
            }, {
                name: '其他用户',
                value: 6458
            }]
        }]
    };
    userTypePieChart.setOption(option);
    addHandler(window, "resize", function () {
        userTypePieChart.resize();
    })
}
function init_weekdevice_bar(ec) {
    _weekdeviceBarChart = ec.init(_domWeekdeviceBar, _themeName);
    var option = {
        color: ["#CCCCCC", '#27A9E3'],
        backgroundColor: _backgroundColor,
        title: {
            show: false
        },
        tooltip: _tooltip,
        legend: {
            data: ['手机用户', '其他用户']
        },
        grid: {
            x: 35,
            y: 30,
            x2: 15,
            y2: 25
        },
        toolbox: _toolbox,
        calculable: false,
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                min: 0,
                max: 9000,
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#999',
                        width: 2,
                        type: 'solid'
                    }
                }
            }
        ],
        yAxis: [
            {
                show: true,
                type: 'value',
                name: "单位（个）",
                min: 0,
                max: 9000,
                axisLabel: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#999',
                        width: 2,
                        type: 'solid'
                    }
                }
            }
        ],
        series: [
            {
                name: '手机用户',
                type: 'bar',
                data: function () {
                    var _counts = [], i = 1;
                    while (i <= 7) {
                        _counts.push(myRandom(4000, 8000));
                        i++;
                    }
                    return _counts;
                }(),
                itemStyle: {
                    normal: {
                        barBorderRadius: 2,
                        label: {
                            show: true,
                            position: "top"
                        }
                    }
                }
            },
            {
                name: '其他用户',
                type: 'bar',
                data: function () {
                    var _counts = [], i = 1;
                    while (i <= 7) {
                        _counts.push(myRandom(2000, 4000));
                        i++;
                    }
                    return _counts;
                }(),
                itemStyle: {
                    normal: {
                        barBorderRadius: 2,
                        label: {
                            show: true,
                            position: "top"
                        }
                    }
                }
            }
        ],
        animation:false
    };
    _weekdeviceBarChart._mySetOption(option);
    addHandler(window, "resize", function () {
        _weekdeviceBarChart.resize();
    })

}
function init_recsort_bar(ec) {
    _recsortPieChart = ec.init(_domRecsortPie, _themeName);
    var option = {
        color: [
            '#99CC00', '#339933', '#CC9933', '#CCCC66',
            '#FF7B71', '#27A9E3', '#99CC33', '#CCCCCC', '#60C0DD'
        ],
        backgroundColor: _backgroundColor,
        calculable: false,
        tooltip: _tooltip,
        legend: {
            show: false,
            data: ["音乐播放", "生活服务", "便民工具", "政务资讯", "军事新闻", "军事游戏"]
        },
        toolbox: _toolbox,
        grid: {
            x: 45,
            y: 15,
            x2: 15,
            y2: 25,
            borderWidth: 0
        },
        xAxis: {
            show: true,
            type: 'category',
            data: [""],
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#999',
                    width: 2,
                    type: 'solid'
                }
            }
        },
        yAxis: {
            show: true,
            type: 'value',
            min: 0,
            max: 505000,
            axisLabel: {
                textStyle: {
                    color: '#999'
                },
                formatter: function (v) {
                    return (v / 10000) + "万";
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#999',
                    width: 2,
                    type: 'solid'
                }
            }
        },
        animation:false
    };
    var _legendData = option.legend.data, _serieArr = [];
    for (var i = 0; i < _legendData.length; i++) {
        _serieArr.push({
            name: _legendData[i],
            type: "bar",
            barWidth: 30,
            data: [myRandom(10000 * (i + 1), 85000 * (i + 1))],
            itemStyle: {
                normal: {
                    barBorderRadius: 0,
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{a}\n{c}'
                    }
                }
            }
        });
    }
    option.series = _serieArr;
    _recsortPieChart._mySetOption(option);
    addHandler(window, "resize", function () {
        _recsortPieChart.resize();
    })
}
function init_versionup_bar(ec) {
    _versionupBarChart = ec.init(_domVersionupBar, _themeName);
    var option = {
        backgroundColor: _backgroundColor,
        color: ["#99CC00"],
        title: {
            show: false
        },
        calculable: false,
        tooltip: {
            trigger: "item",
            formatter: function (v) {
                return v.name + "<br>更新率：" + v.value + "%";
            }
        },
        legend: {
            show: false,
            data: [""],
            y: 'top'
        },
        toolbox: _toolbox,
        grid: {
            x: 15,
            y: 15,
            x2: 15,
            y2: 15,
            borderWidth: 0
        },
        xAxis: [{
            show: false,
            type: 'category',
            data: ["微信", "腾讯QQ", "百度地图", "搜狗输入法", "爱壁纸", "酷狗音乐"]
        }],
        yAxis: [{
            type: 'value',
            scale: true,
            min: 0,
            max: 120,
            show: false

        }],
        series: [
            {
                name: '更新率',
                symbolSize: _symbolSize,
                type: 'bar',
                barWidth: 25,
                data: [96, 92, 89, 79, 62, 41],
                itemStyle: {
                    normal: {
                        color: function (v) {
                            var _c = "#5B67AE";
                            switch (v.dataIndex) {
                                case 0:
                                    _c = "#F16A10";
                                    break;
                                case 1:
                                    _c = "#E6B636";
                                    break;
                                case 2:
                                    _c = "#1DA782";
                                    break;
                            }
                            return _c;
                        },
                        barBorderRadius: 2,
                        label: {
                            show: true,
                            position: "top",
                            formatter: function (v) {
                                return v.name + "\n" + v.value + "%";
                            }
                        }
                    }
                }
            }]
    };
    _versionupBarChart._mySetOption(option);
    addHandler(window, "resize", function () {
        _versionupBarChart.resize();
    })
}
function init_activeuser_line(ec) {
    _activeuserLineChart = ec.init(_domActiveuserLine, _themeName);
    var option = {
        color: ["#FF9900", "#003300"],
        backgroundColor: _backgroundColor,
        title: {
            show: false
        },
        calculable: false,
        tooltip: _tooltip,
        legend: {
            data: ["手机用户", "其他用户"],
            y: 'top',
            selectedMode: false
        },
        toolbox: _toolbox,
        grid: {
            x: 42,
            y: 25,
            x2: 20,
            y2: 25
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: (function () {
                var _times = [], _curTime = new Date().getTime();
                for (var i = _curTime; true; i -= 10 * 1000) {
                    if (_times.length >= 5) {
                        break;
                    }
                    _times.push(DateFormat("hh:mm:ss", new Date(i)))
                }
                return _times;
            })(),
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#999',
                    width: 2,
                    type: 'solid'
                }
            }
        }],
        yAxis: [{
            type: 'value',
            scale: true,
            name: '用户数',
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#999',
                    width: 2,
                    type: 'solid'
                }
            }
        }],
        series: [{
            name: '手机用户',
            type: 'line',
            data: (function () {
                var _counts = [], i = 1;
                while (i <= 5) {
                    _counts.push(myRandom(4000, 8000));
                    i++;
                }
                return _counts;
            })()
        }, {
            name: '其他用户',
            type: 'line',
            data: (function () {
                var _counts = [], i = 1;
                while (i <= 5) {
                    _counts.push(myRandom(2000, 5000));
                    i++;
                }
                return _counts;
            })()
        }],
        animation:false
    };
    _activeuserLineChart._mySetOption(option);
    clearInterval(timeTicket);
    var timeTicket = setInterval(function () {
        var dyData1 = myRandom(4000, 8000),
            dyData2 = myRandom(2000, 5000),
            axisData = DateFormat("hh:mm:ss", new Date());
        _activeuserLineChart.addData([
            [
                0, // 系列索引
                dyData1, // 新增数据
                true, // 新增数据是否从队列头部插入
                false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                axisData // 坐标轴标签
            ],
            [
                1, // 系列索引
                dyData2, // 新增数据
                true, // 新增数据是否从队列头部插入
                false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                axisData // 坐标轴标签
            ]
        ]);
    }, 10000);
    addHandler(window, "resize", function () {
        _activeuserLineChart.resize();
    })
}

